<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
    <style>
        .layui-table td, .layui-table th {
            min-width: 60px;
        }
    </style>
</head>

<body class='labelAuto'>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">施工管理</a>
            <a><cite>项目列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <div class="layui-fluid">
        <div class="layui-d layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body search">
                        <form action="" class="layui-form livingList">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">搜索</label>
                                    <div class="layui-input-block">
                                        <input type="search" autocomplete="off" placeholder="输入项目名称" class="layui-input" id='searchInput'>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn search" type="button" id='search'>
                                        <i class="iconfont layui-icon">&#xe615;</i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body tableCardBody">
                        <table class="layui-table" id="lists" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type='text/html' id='toolbar'>
    <button class="layui-btn add" type="button" auth='addProject'>添加项目</button>
</script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        // 异步数据加载
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '项目列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/project/project/lists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function(res){
				return {
					"code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count":res.data.count
				};
            },
            where: {
                search: "",
                token:getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            page: true, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    { field: '', title: '编号', type: 'numbers',width:'60'},
                    { field: 'code', title: '项目编码',width:"80"},
                    { field: 'name', title: '项目名称',width:"300"},
                    { field: 'city', title: '城市',width:"90"},
                    { field: 'projectAccount', title: '项目金额',width:"100"},
                    { field: 'projectAmount', title: '总工程量',width:"100"},
                    { field: 'order', title: '排序',width:"70"},
                    { field: 'status', title: '状态',width:"100",templet:function(d){
                        return `${d.status==2?"完工":"施工中"}`
                    }},
                    { field: '', title: '操作',width:"240",templet:function(d){
                        html = `<button class='area layui-btn' data-id=${d.id} auth='areaLists' lay-event='area'>施工区</button>`
                        if(d.status==2){
                            html +=  "";
                        }else{
                            html +=`
                                <button class='bianji layui-btn' data-id=${d.id} auth='editProject' lay-event='bianji'>编辑</button>
                                <button class='true layui-btn' data-id=${d.id} auth='projectStatus' lay-event='true'>完工</button>
                                <button class='remove layui-btn layui-btn-danger' data-id=${d.id} auth='delProject' lay-event='remove'>删除</button>
                            `
                        }
                        return html;
                    }}
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done:function(){
                permission();
            }
        });
        table.on('tool(test)',function(data){
            if(data.event=='remove'){
                layer.open({
                    type: 0,
                    title: "删除",
                    area: ['40%', '30%'],
                    content: `<p class='one_p'>确定删除吗?</p>`,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + "/project/project/delete",
                            type: "POST",
                            async: false,
                            data: {
                                id:data.data.id,
                                token:getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('删除项目',r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('删除项目',r);
                                }
                            }
                        })
                    }
                })
            }else if(data.event=='true'){
                layer.open({
                    type: 1,
                    title: "编辑",
                    area: ['40%', 'auto'],
                    content: `
                        <form class='layui-form '>
                            <label class='layui-form-label' style="width:auto">确定项目已完工吗?</label>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + "/project/project/editStatus",
                            type: "POST",
                            async: false,
                            data: {
                                id:data.data.id,
                                token:getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('编辑项目状态',r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('编辑项目状态',r);
                                }
                            }
                        })
                    }
                })
            }else if(data.event=='bianji'){
                layer.open({
                    type: 1,
                    title: "编辑",
                    area: ['40%', 'auto'],
                    content: `
                        <form action="" class="layui-form layerOpen">
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">项目名称</label>
                                    <div class="layui-input-block">
                                        <input type='text' id='name' class='layui-input' value=${data.data.name}>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">城市</label>
                                    <div class="layui-input-block">
                                        <input type='text' id='city' class='layui-input' value=${data.data.city}>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">总工程款</label>
                                    <div class="layui-input-block">
                                        <input type='text' id='projectAmount' class='layui-input' value=${data.data.projectAmount==null?"":data.data.projectAmount}>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">项目金额</label>
                                    <div class="layui-input-block">
                                        <input type='text' id='projectAccount' class='layui-input' value=${data.data.projectAccount==null?"":data.data.projectAccount}>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">排序</label>
                                    <div class="layui-input-block">
                                        <input type='number' id='order' min=0 class='layui-input' value=${data.data.order}>
                                    </div>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    yes: function (index, layero) {
                        $.ajax({
                            url: url + "/project/project/edit",
                            type: "POST",
                            async: false,
                            data: {
                                id: data.data.id,
                                name:$('#name').val(),
                                city: $('#city').val(),
                                projectAmount: $('#projectAmount').val(),
                                projectAccount: $('#projectAccount').val(),
                                order:  $('#order').val(),
                                token: getToken()
                            },
                            success: function (r) {
                                if (r.code == 100000) {
                                    tips('编辑项目',r);
                                    setTimeout(function () {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('编辑项目',r);
                                }
                            }
                        })
                    }
                })
            }else if(data.event=='area'){
                var id = data.data.id;
                localStorage.setItem('projectName',data.data.name)
                window.location.href = 'projectArea.html?projectId='+id;
            }
        })

        $('body').on('click', '.add', function () {
            layer.open({
                type: 1,
                title: "添加",
                area: ['40%', 'auto'],
                content: `
                    <form class='layui-form layerOpen'>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>项目名称</label>
                                <div class='layui-input-block'>
                                    <input type='text'  class='layui-input'id='name'>
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>城市名称</label>
                                <div class='layui-input-block'>
                                    <input type='text'  class='layui-input' id='city'>
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>总工程款</label>
                                <div class='layui-input-block'>
                                    <input type='number' min=0 class='layui-input' id='projectAmount'>
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>项目金额</label>
                                <div class='layui-input-block'>
                                    <input type='number' min=0  class='layui-input' id='projectAccount'>
                                </div>
                            </div>
                        </div>
                        <div class='layui-item'>
                            <div class='layui-inline'>
                                <label class='layui-form-label'>排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序</label>
                                <div class='layui-input-block'>
                                    <input type='number' min=1  class='layui-input' id='order' value='1'>
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                btn: ['确认', '取消'],
                skin: 'my-skin',
                yes: function (index, layero) {
                    var name = $('#name').val();
                    var city = $('#city').val();
                    var projectAmount = $('#projectAmount').val();
                    var projectAccount = $('#projectAccount').val();
                    var order = parseInt($('#order').val());
                    $.ajax({
                        url: url + "/project/project/add",
                        type: "POST",
                        async: false,
                        data: {
                            name: name,
                            city: city,
                            projectAmount: projectAmount,
                            projectAccount: projectAccount,
                            order: order,
                            token:getToken()
                        },
                        success: function (r) {
                            if (r.code == 100000) {
                                tips('添加项目',r);
                                setTimeout(function () {
                                    layer.closeAll();
                                    table.reload('lists');
                                }, 2000)
                            } else {
                                tips('添加项目',r);
                            }
                        }
                    })
                }
            })
        })
        //搜索
        $('body').on('click','#search',function(){
            var search=$(this).parent().prev().find('input').val();
            table.reload('lists',{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where:{
                    token:getToken(),
                    search:search
                }
            })
        })
    });
    
</script>

</html>